<template>
  <div class="search">
    <div class="nav">
      <div class="nav-left">
        <van-icon name="arrow-left" @click="back" />
      </div>
      <div class="nav-search">
        <van-search
          v-model="value"
          show-action
          shape="round"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="search-hotsearch" v-if="books.length === 0">
      <div class="search-hotsearch-list">
        <div
          class="search-hotsearch-list-item"
          v-for="(item, i) in hotsearch"
          :key="i"
          @click="getId(item.id)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 搜索到的书籍 -->
    <div class="search-content">
      <div class="search-content-list">
        <div
          class="search-content-list-item"
          v-for="(item, i) in books"
          :key="i"
          @click="getId(item.bookId)"
        >
          <div class="search-content-list-item-img">
            <img :src="item.cover" alt="" @error="handleError($event)" />
          </div>
          <div class="search-content-list-item-title">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="search-page" v-if="books.length > 0">
      <van-pagination
        v-model="page"
        :total-items="125"
        :show-page-size="4"
        force-ellipses
        @change="onSearch"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "search",
  data() {
    return {
      value: "",
      books: [],
      hotsearch: [
        {
          bookType: 0,
          hot: 5,
          id: "52126631716144f390949dec99d404f5_4",
          name: "人间值得",
        },
        {
          bookType: 0,
          hot: 4,
          id: "c12eb79336194295bccaf33de02766f1_4",
          name: "上门女婿",
        },
        {
          bookType: 0,
          hot: 3,
          id: "bd_7b5464bd4eb247db9a9624d84b7de24a_4",
          name: "曲意逢情",
        },
        {
          bookType: 0,
          hot: 2,
          id: "bd_4cb434d888214c44bf232f1944bb9788_4",
          name: "在荒岛求生的日子",
        },
        {
          bookType: 0,
          hot: 1,
          id: "6e4562c3f24d4ee3b94aaebb4e4f62e9_4",
          name: "草莓甜吻",
        },
        {
          bookType: 0,
          hot: 0,
          id: "bd_366d74cce6a74871a4f35ad4ac96c117_4",
          name: "巅峰",
        },
      ],
      page: 1,
    };
  },
  created() {
    // this.HotSearch();
  },
  methods: {
    //点击搜索
    onSearch() {
      Toast(this.value);
      console.log("val==>", this.value);
      if (this.value.length > 0) {
        this.searchList(this.value, this.page);
      }
      let valueHistory = localStorage.getItem("valueHistory");
      if (!valueHistory) {
        valueHistory = [];
      } else {
        valueHistory = JSON.parse(valueHistory);
      }
      //判断是否存在重复的搜索关键字
      for (var i = 0; i < valueHistory.length; i++) {
        if (valueHistory[i].val === this.value) {
          //如果找到, 则终止执行
          return;
        }
      }
      //如果搜索为空则不添加
      if (this.value === "") {
        return;
      }
      valueHistory.push({ val: this.value });
      localStorage.setItem("valueHistory", JSON.stringify(valueHistory));
    },
    //搜索
    searchList(keyword, page) {
      //发送请求
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/search/book.json",
        params: {
          keyword,
          page,
        },
      })
        .then((result) => {
          console.log("result.data.data.books ==> ", result.data.data.books);
          this.books = result.data.data.books;
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //热门搜索
    // HotSearch() {
    //   //发送请求
    //   this.axios({
    //     //请求类型
    //     method: "get",
    //     //请求路径
    //     url: "https://apis.netstart.cn/yunyuedu/search/getHotWords",
    //   })
    //     .then((result) => {
    //       console.log("result ==> ", result);
    //       this.hotsearch = result.data.list;
    //     })
    //     .catch((err) => {
    //       console.log("err ==> ", err);
    //     });
    // },
    //传递书籍的id
    getId(pid) {
      console.log("pid ==> ", pid);
      this.$router.push({ name: "noveldetail", params: { pid } });
    },
    //没有图片的话用默认图片
    handleError(e) {
      e.currentTarget.src =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc823bc165add16c76bdefaee090c45c202267a452deaa-lLhkHf_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650685371&t=e67779564f0416a69ca07519acf1045b";
    },
    //返回上一级
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  height: 100%;
  .nav {
    height: 54px;
    .nav-left {
      float: left;
      width: 10%;
      height: 100%;
      font-size: 15px;
      text-indent: 8px;
      line-height: 54px;
      background-color: #fff;
    }
    .nav-search {
      float: left;
      width: 90%;
    }
  }
  .search-hotsearch {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    .search-hotsearch-list {
      display: flex;
      flex-wrap: wrap;
      .search-hotsearch-list-item {
        padding: 5px 10px 5px 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        font-size: 15px;
        background-color: rgb(235, 178, 178);
      }
    }
  }
  .search-content {
    width: 100%;
    margin-top: 20px;
    padding-bottom: 50px;
    .search-content-list {
      display: flex;
      flex-wrap: wrap;
      padding-left: 15px;
      .search-content-list-item {
        width: calc(33% - 10px);
        margin-bottom: 10px;
        margin-right: 10px;
        font-size: 15px;
        text-align: center;
        .search-content-list-item-img {
          width: 100%;
          height: 150px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
        }
        .search-content-list-item-title {
          margin-bottom: 10px;
        }
      }
    }
  }
  .search-page {
    position: fixed;
    width: 100%;
    bottom: 0px;
  }
}
</style>